<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				width: 100%;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				background-image: linear-gradient(45deg,#845EC2, #D65DB1,#FF6F91,#FF9671,#FFC75F,#F9F871);
			}
			#canvas{
				border: 5px solid #ccc;
				background-color: #000;
				position: absolute;
				border-radius: 40px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		<script>
			let canvas=document.getElementById("canvas");
			let cxt=canvas.getContext('2d');
			// let numContent=canvas.getContext('2d');
			//绘制表盘,每秒都绘制一下表里的指针
			setInterval("clock()",1000);
			function clock(){
				// 先清除一下上次绘制的图形，不然会有密密麻麻的指针
				cxt.clearRect(0,0,500,500);
				//获取系统时间
				const myDate=new Date();
				let hour=myDate.getHours();
				let min=myDate.getMinutes();
				let sec=myDate.getSeconds();
				//系统时间是24小时制
				//将24小时转为12小时制
				hour=hour>12?hour-12:hour;
				hour+=(min/60);
				min+=(sec/60);
				//绘制圆盘
				cxt.beginPath();
				cxt.arc(250,250,200,0,2*Math.PI);
				// numContent.arc(250,250,200,0,2*Math.PI);
				cxt.closePath();
				cxt.strokeStyle="#00ffff";
				cxt.lineWidth=10;
				cxt.stroke();
				cxt.save();//保存
				//绘制时刻度 12个，一个30度
				//移动原点（0,0）到圆的中心（250,250）
				cxt.translate(250,250);
				cxt.strokeStyle="yellow";
				cxt.lineWidth=7;
				for(let i=0;i<12;i++){
					cxt.rotate(30*Math.PI/180);
					cxt.beginPath();
					cxt.moveTo(0,-195);
					cxt.lineTo(0,-175);
					cxt.closePath();
					cxt.stroke();
					// numContent.beginPath();
					// numContent.fillStyle='#ccc'
					// numContent.font='20px Arial'
					// if(i===9||i===10||i===11){//添加数字，对数字对齐做一下优化
					// 	numContent.fillText(`${i+1}`,-12,-155);
					// }else {
					// 	numContent.fillText(`${i+1}`,-5,-155);
					// }
					// numContent.closePath();
					// numContent.stroke();

				}
				cxt.restore();//恢复，不会影响其他形状
				// numContent.resolve()

				//绘制分刻度
				cxt.save();//保存
				cxt.translate(250,250);
				cxt.strokeStyle="yellow";
				cxt.lineWidth=5;
				for(let i=0;i<60;i++){
					cxt.rotate(6*Math.PI/180);
					cxt.beginPath();
					cxt.moveTo(0,-195);
					cxt.lineTo(0,-185);
					//旋转
					cxt.closePath();

					cxt.stroke();
					
				}
				cxt.restore();//恢复，不会影响其他形状
				cxt.save();

				//绘制时针
				cxt.translate(250,250);
				//1小时旋转30度，30*Math.PI/180
				//需要和实时时间hour对应
				cxt.rotate(hour*30*Math.PI/180);
				//状态，粗细和颜色
				cxt.lineWidth=7;
				cxt.strokeStyle="#00ffff";
				//绘制
				cxt.beginPath();
				//y稍微下一些，突出一些逼真一点
				cxt.moveTo(0,10);
				cxt.lineTo(0,-110);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
				
				//绘制分针，复制
				cxt.save();
				cxt.translate(250,250);
				cxt.rotate(min*6*Math.PI/180);
				//状态，粗细和颜色
				cxt.lineWidth=5;
				cxt.strokeStyle="yellow";
				//绘制
				cxt.beginPath();
				//y稍微下一些，突出一些逼真一点
				cxt.moveTo(0,10);
				cxt.lineTo(0,-150);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
				
				//秒针
				cxt.save();
				cxt.translate(250,250);
				cxt.rotate(sec*6*Math.PI/180);
//				状态，粗细和颜色
				cxt.lineWidth=3;
				cxt.strokeStyle="red";
				//绘制
				cxt.beginPath();
				//y稍微下一些，突出一些逼真一点
				cxt.moveTo(0,10);
				cxt.lineTo(0,-170);
				cxt.closePath();
				cxt.stroke();
				//秒针上面的小圆
				cxt.beginPath();
				cxt.strokeStyle="red";
				cxt.fillStyle="yellow";
				//y稍微下一些，突出一些逼真一点
				cxt.arc(0,0,7,0,2*Math.PI);
				cxt.closePath();
				cxt.fill();
				cxt.stroke();
				
				//秒针上面的另一个小圆
				cxt.beginPath();
				cxt.strokeStyle="red";
				cxt.fillStyle="yellow";
				//y稍微下一些，突出一些逼真一点
				cxt.arc(0,-130,7,0,2*Math.PI);
				cxt.closePath();
				cxt.fill();
				cxt.stroke();
				cxt.restore();
			}
		</script>
	</body>
</html>
